<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <meta http-equiv="Content-Type" charset="UTF-8">
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <link rel="stylesheet" href="./static/css/snow.css">
    <link rel="stylesheet" href="./static/css/style.css">
    <link rel="stylesheet" href="./static/css/font-awesome.min.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="./static/lib/layui/layui.js" type="text/javascript"></script>
    <script src="./static/js/xadmin.js" type="text/javascript"></script>
</head>

<body>
<div class="snow-container">
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
</div>

<div class="top-buttons-agileinfo">
    <a href="/login" class="active">登 入</a><a href="/register" >注 册</a>
</div>
<h1>欢迎进入用户管理系统</h1>
<div class="main-agileits" id="loginApp">
    <!--form-stars-here-->
    <div class="form-w3-agile">
        <h2 class="sub-agileits-w3layouts">登 录</h2>
        <form action="#" method="post">
            <input type="text" placeholder="username" id="username"/>
            <input type="password" placeholder="password" id="password" />
            <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" onclick="login()">登 录</button>
            <p class="p-bottom-w3ls"><a href="/login" >Sign Up here</a>if u do not have an account yet.</p>
        </form>
    </div>
</div>
<!--//form-ends-here-->
<!-- copyright -->
<div class="copyright w3-agile">
    <p> © 2017 Internship Sign In & Sign Up Form . All rights reserved | Design by <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a></p>
</div>

</body>
<script>
/*定义login()事件*/
    function login() {
        /*获取文本框的值*/
        var username = $("#username").val();
        var password = $("#password").val();
        console.log(username);
        console.log(password);

        /*发送Ajax请求将数据带到后端，数据的格式为json*/
        $.ajax({
           url:"../user/login",
           type:"POST",
           dataType:"json",
           data:{
               username:username,
               password:password
           },
            success:function (data) {
               //请求成功，状态码为200
                if (data.code == 200){
                    //弹窗提示
                    layer.alert(data.message,{icon:6},function () {
                        location.href = "../index"
                    })
                }
                //请求成功，状态码为500,表示数据库中没有当前用户
                if (data.code == 500) {
                    layer.alert(data.message,{icon:5},function () {
                        location.reload(); //重新加载
                    })
                }
            },error:function () {
                alert("服务器丢了")
            }
        });
    }

</script>
</html>